```html
<script setup>
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(colorPicker.machine, {
    id: "1",
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = computed(() => colorPicker.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()"
      >Select Color: {{ api.valueAsString }}</label
    >
    <input v-bind="api.getHiddenInputProps()" />
    <div v-bind="api.getControlProps()">
      <button v-bind="api.getTriggerProps()">
        <div v-bind="api.getTransparencyGridProps({ size: '10px' })" />
        <div v-bind="api.getSwatchProps({ value: api.value })" />
      </button>
      <input v-bind="api.getChannelInputProps({ channel: 'hex' })" />
      <input v-bind="api.getChannelInputProps({ channel: 'alpha' })" />
    </div>

    <div v-bind="api.getPositionerProps()">
      <div v-bind="api.getContentProps()">
        <div v-bind="api.getAreaProps()">
          <div v-bind="api.getAreaBackgroundProps()" />
          <div v-bind="api.getAreaThumbProps()" />
        </div>

        <div v-bind="api.getChannelSliderProps({ channel: 'hue' })">
          <div v-bind="api.getChannelSliderTrackProps({ channel: 'hue' })" />
          <div v-bind="api.getChannelSliderThumbProps({ channel: 'hue' })" />
        </div>

        <div v-bind="api.getChannelSliderProps({ channel: 'alpha' })">
          <div v-bind="api.getTransparencyGridProps({ size: '12px' })" />
          <div v-bind="api.getChannelSliderTrackProps({ channel: 'alpha' })" />
          <div v-bind="api.getChannelSliderThumbProps({ channel: 'alpha' })" />
        </div>
      </div>
    </div>
  </div>
</template>
```
